<div>
  <div class="col-md-4 position-r">
    <div class="group-title">一级分类
      <input type="text" class="form-control" [(ngModel)]="addFirName">
      <button class="btn btn-default" (click)="addCategory(0)">增加</button>
    </div>
    <div class="group-item">
      <ul class="list-unstyled">
        <li *ngFor="let item of firLevel" [ngClass]="{'active': firId === item.id}" (click)="chosedCategory(0,item.id)">{{item.name}}
          <span class="pull-right">
            <i class="iconfont icon-edit" (click)="editCategory(item.name,item.id,item.level,item.parent)"></i>
            <i class="iconfont icon-remove" (click)="delCategory(item.id)"></i>
          </span>
        </li>
      </ul>
    </div>
    <i class="iconfont icon-right"></i>
  </div>
  <div class="col-md-4 position-r">
    <div class="group-title">二级分类
      <input type="text" class="form-control" [(ngModel)]="addSecName">
      <button class="btn btn-default" (click)="addCategory(1)">增加</button>
    </div>
    <div class="group-item">
      <ul class="list-unstyled">
        <li *ngFor="let item of secLevel" [ngClass]="{'active': secId === item.id}" (click)="chosedCategory(1,item.id)">{{item.name}}
          <span class="pull-right">
            <i class="iconfont icon-edit" (click)="editCategory(item.name,item.id,item.level,item.parent)"></i>
            <i class="iconfont icon-remove" (click)="delCategory(item.id)"></i>
          </span>
        </li>
      </ul>
    </div>
    <i class="iconfont icon-right"></i>
  </div>
  <div class="col-md-4">
    <div class="group-title">三级分类
      <input type="text" class="form-control" [(ngModel)]="addThirdName">
      <button class="btn btn-default" (click)="addCategory(2)">增加</button>
    </div>
    <div class="group-item">
      <ul class="list-unstyled">
        <li *ngFor="let item of thirdLevel" [ngClass]="{'active': thirdId === item.id}" (click)="chosedCategory(2,item.id)">{{item.name}}
          <span class="pull-right">
            <i class="iconfont icon-edit" (click)="editCategory(item.name,item.id,item.level,item.parent)"></i>
            <i class="iconfont icon-remove" (click)="delCategory(item.id)"></i>
          </span>
        </li>
      </ul>
    </div>
  </div>
</div>

<!--修改弹窗-->
<div class="modal fade" bsModal #editModal="bs-modal" tabindex="-1">
  <div class="modal-dialog modal-md">
    <div class="modal-content">
      <div class="modal-body">
        <input type="text" class="form-control" [(ngModel)]="editName">
        <div class="text-center">
          <button class="btn btn-default btn-md-long" type="button" (click)="editModal.hide()">取消</button>
          <button class="btn btn-success btn-md-long" type="submit" (click)="editSubmit()">确定</button>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- 是否确认删除弹框  属性名 -->
<div class="modal fade" bsModal #delModal="bs-modal" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title pull-left">提示</h4>
        <button type="button" class="close pull-right" aria-label="Close" (click)="delModal.hide()">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body text-center">
        是否确认删除
      </div>
      <div class="modal-footer mt20">
        <button class="btn btn-default btn-md-long" type="button" (click)="delModal.hide()">取消</button>
        <button class="btn btn-success btn-md-long" type="submit" (click)="doDelCateory()">确定</button>
      </div>
    </div>
  </div>
</div>

<app-notification [type]="type" [message]="message" [isShow]="isShow" (promptIsShow)="promptIsShow($event)"></app-notification>
